<template>
  <div @touchmove.prevent @touchmove.stop class="container box box-ac box-jc">
    <div class="popup animated bounceInDown">
      <div class="content">
        <div class="title tx-c">请选择还款方式</div>
        <div class="list">
          <div @click="selectPayMode(index)" v-for="(item, index) in payModes" :value="item" :key="index" class="item box">
            <div class="name box-f1 ell">{{item.payModeName}}</div>
            <div class="checkbox box box-ac">
              <div :class="{'act': item.checked}" class="icon icon-checkbox"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'payModes',
  props: ['payModes'],
  data () {
    return {
    }
  },
  methods: {
    selectPayMode (index) {
      this.$emit('selectPayMode', index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.container{
  position: absolute;
  z-index: 88;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.7);
}
.popup{
  width:6rem;
  position:absolute;
  .content{
    background-color:#FFF;
    border-radius: .2rem;
    color:#333;
    line-height:.8rem;
    font-size:.36rem;
    .title{
      height:1.2rem;
      line-height:1.2rem;
    }
    .list{
      .item{
        height:.88rem;
        line-height: .88rem;
        padding: 0 .3rem;
        border-top:1px solid $borderColor;
      }
    }
  }
}
</style>
